<template>
    <view>
        <view
            class="journalItem"
            v-for="item in journalList"
            :key="item.id"
            @click="gotoDetail(item)"
        >
            <view class="imgLayout">
                <image class="img" :src="item.happen_path" mode="scaleToFill" />
            </view>
            <view class="journalLayout">
                <view class="header">
                    <view class="title">{{ item.title }}</view>
                    <view class="weather">
                        <image
                            class="img"
                            :src="item.weather_path"
                            mode="heightFix"
                        />
                    </view>
                </view>
                <view class="content"> {{ item.content }} </view>
                <view class="footer">
                    <view class="planStatus" v-if="item.plan_status === 0"
                        >Planed</view
                    >
                    <view
                        class="planStatus actioning"
                        v-if="item.plan_status === 1"
                    >
                        Actioning</view
                    >
                    <view
                        class="planStatus complete"
                        v-if="item.plan_status === 2"
                    >
                        Complete
                    </view>
                    <view class="mood">
                        <image
                            class="img"
                            :src="item.mood_path"
                            mode="heightFix"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
    data() {
        return {};
    },
    methods: {
        gotoDetail(item) {
            const jounalData = JSON.stringify(item);
            uni.$u.route("/pages_second/journalDeatil/journalDeatil", {
                jounalData,
            });
        },
    },
    onLoad() {},
    computed: {
        ...mapState("journalStore", ["journalList"]),
    },
};
</script>

<style lang="scss" scoped>
.journalItem {
    display: flex;
    align-items: center;
    padding: 32rpx;
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    box-shadow: 6rpx 6rpx 20rpx #ccc;

    .imgLayout {
        width: 128rpx;
        height: 128rpx;
        margin-right: 40rpx;
        .img {
            width: 100%;
            height: 100%;
        }
    }
    .journalLayout {
        width: 470rpx;
        .header {
            display: flex;
            justify-content: space-between;
            .title {
                font-size: 32rpx;
                font-weight: bold;
            }
            .weather {
                .img {
                    height: 48rpx;
                }
            }
        }
        .content {
            font-size: 28rpx;
            color: #8b8b8b;
            margin: 12rpx 0;
            white-space: nowrap;
            max-width: 470rpx;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .planStatus {
                background: #e5ebfc;
                padding: 6rpx 12rpx;
                color: #446acd;
                font-weight: bold;
                border-radius: 12rpx;
            }
            .actioning {
                background: #fff1e4;
                color: #ff942f;
            }
            .complete {
                background: #e1d0e8;
                color: #d299b7;
            }
            .mood {
                .img {
                    height: 64rpx;
                }
            }
        }
    }
}
</style>
